<template>
  <el-dialog
    :title="isEdit ? '编辑' : '新增'"
    :visible.sync="isShow"
    append-to-body
    width="700px"
    @close="closeDialog"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="formData"
      label-position="center"
      size="large"
      label-width="120px"
    >
      <el-radio-group
        v-model="formData.func"
        style="margin:0 0 20px 50px;"
        @change="handleFuncChange"
      >
        <el-radio :label="1">正常控温</el-radio>
        <el-radio :label="2">荧光采集</el-radio>
        <el-radio :label="3">溶解功能</el-radio>
      </el-radio-group>
      <div v-if="[1, 2].includes(formData.func)">
        <el-row>
          <el-col :span="12">
            <el-form-item label="温度(℃)" prop="tempBottom">
              <el-input
                v-model="formData.tempBottom"
                placeholder="请输入"
                style="width:200px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间(s)" prop="time">
              <el-input
                v-model="formData.time"
                placeholder="请输入"
                style="width:200px;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="跳转步骤" prop="jump">
              <el-input
                v-model="formData.jump"
                placeholder="请输入"
                style="width:200px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="循环次数" prop="loop">
              <el-input
                v-model="formData.loop"
                placeholder="请输入"
                style="width:200px;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div v-if="formData.func === 3">
        <el-form-item label="步增温度(℃)" prop="tempStep">
          <el-input
            v-model="formData.tempStep"
            placeholder="请输入"
            style="width:200px;"
          />
        </el-form-item>
        <el-form-item label="结束温度(℃)" prop="tempMax">
          <el-input
            v-model="formData.tempMax"
            placeholder="请输入"
            style="width:200px;"
          />
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="confirmSubmit"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { qpcrparaProvider } from '@/api/api'

export default {
  name: 'AddNewStep',
  data() {
    return {
      isShow: false,
      isEdit: false,
      rules: {},
      formData: {
        func: 1,
        tempBottom: null,
        time: null,
        jump: null,
        loop: null,
        tempMax: null,
        tempStep: null,
        progId: null
      },
      formDataOriginal: {},
      loading: false,
      id: ''
    }
  },
  mounted() {
    this.formDataOriginal = { ...this.formData }
  },
  methods: {
    init(isEdit = false, data) {
      this.isEdit = isEdit
      if (this.isEdit) {
        this.id = data.id
        this.formData = data
      }
      this.isShow = true
    },
    closeDialog() {
      this.formData = { ...this.formDataOriginal }
      this.isShow = false
    },
    handleFuncChange(val) {
      this.formData = { ...this.formDataOriginal }
      this.formData.func = val
    },
    confirmSubmit() {
      // this.closeDialog()
      this.formData.progId = this.$route.params.id
      if (this.isEdit) {
        this.formData.id = this.id
      }
      qpcrparaProvider.save(this.formData).then(res => {
        if (res.code === 0) {
          this.closeDialog()
          this.$emit('addSuccess')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
